<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String ctx = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + ctx + "/";
%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卖</title>
    <link rel="stylesheet" href="/css/user.css">
</head>

<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<header>
    <jsp:include page="topbar.jsp"/>
    <h2>二手交易平台</h2>
</header>
<div class="content">
    <div class="con-l">
        <div class="con-ll">
            <div class="tx"><img src="/images/头像.jpg" style=" height: 100%;"></div>
            <div class="name">姓名：<p>${sessionScope.userAccount.userName}</p>
            </div>
            <div class="mail">账号：<p>${sessionScope.userAccount.userAddress}</p>
            </div>
        </div>
        <div id="user">
            <li><a href="<%=ctx%>/userSell/MyGoods">买</a></li>
            <li style="background-color:#169BD5;"> 卖</li>
        </div>
        <div id="tab">
            <ul>
                <li class="fli">闲置发布</li>
                <li>我的发布</li>
                <li>订单管理</li>
                <li>退出</li>
            </ul>
        </div>
    </div>
    <div class="con-r">
        <div id="tabs">
            <div class="tabs1">
                <h5>发布新物品</h5>
                <form action="<%=ctx%>/userSell/save" method="post" enctype="multipart/form-data">

                    <label>
                        物品名称：
                        <input type="text" name="goodsName">
                    </label>

                    <label>
                        价格 (元)：
                        <input type="text" name="goodsPrice"
                               oninput="value=value.replace(/[^\d]/g,'')">
                    </label>


                    <label>
                        物品简介：
                        <input style="height: 100px;" type="text" name="goodsIntroduce">
                    </label>

                    <label>
                        物品特点：
                        <input style="height: 100px;" type="text" name="goodsTrait">
                    </label>


                    <label>
                        成色：
                        <input style="height: 50px;" type="text" name="goodsCondition">
                    </label>
                    <label>
                        选择分类：
                        <select style="margin-left: 10px; border-radius: 2px;" name="goodsClassifyId">
                            <c:forEach items="#{all}" var="all">
                                <option value="${all.goodsCategoryId}">${all.goodsCategory}
                                </option>
                            </c:forEach>
                        </select>
                    </label>
                    <p style="margin-top: 20px;">物品图片:
                        <input type="file" name="file">
                    </p>
                    <input type="submit" value="提交">
                </form>
            </div>
            <div>
                <h5>我的发布</h5>
                <table border="1px" cellspacing="0px" style="border-collapse:collapse; width: 90%;
                    margin: 30px;">
                    <tr class="mul">
                        <td style="width: 18%;">商品编号</td>
                        <td style="width: 20%;">图片</td>
                        <td style="width: 16%;">物品名</td>
                        <td style="width: 12%;">详情</td>
                        <td style="width: 12%;">发布时间</td>
                        <td style="width: 12%;">审核状态</td>
                    </tr>
                    <c:forEach items="#{goodsList}" var="goodsList">
                        <tr class="det">
                            <td>${goodsList.object.goodsId}</td>
                            <td><img src="${goodsList.object.goodsImg}"
                                     style="width: 150px; height: 150px; margin-top: 5px;"></td>
                            <td>${goodsList.object.goodsName}</td>
                            <td style="font-size: 12px; color: darkturquoise;"
                                onclick="document.getElementById('part').style.display='block'">【详情】
                            </td>
                            <td>${goodsList.startTime}</td>
                            <td>${goodsList.object.goodsState.goodiesState}</td>
                            <td>
                                    <%--<button>修改</button>&emsp;&emsp;<button>删除</button>--%>
                            </td>
                        </tr>
                    </c:forEach>
                </table>
            </div>
            <div>
                <h5>订单管理</h5>
                <table border="1px" cellspacing="0px" style="border-collapse:collapse; width: 90%;
                    margin: 30px;">
                    <tr class="mul">
                        <td style="width: 10%;">订单编号</td>
                        <td style="width: 16%;">图片</td>
                        <td style="width: 10%;">物品名</td>
                        <td style="width: 10%;">购买时间</td>
                        <td style="width: 10%;">结束时间</td>
                        <td style="width: 10%;">订单评论</td>
                        <td style="width: 7%;">订单评星</td>
                        <td style="width: 7%;">订单状态</td>
                        <td style="width: 10%;">操作</td>

                    </tr>
                    <c:forEach items="#{allOrderByGoodsId}" var="allOrderByGoodsId">
                        <tr class="det">
                            <td>${allOrderByGoodsId.object.orderId}</td>
                            <td><img src="${allOrderByGoodsId.object.goods.goodsImg}"
                                     style="width: 150px; height: 150px; margin-top: 5px"></td>
                            <td>${allOrderByGoodsId.object.goods.goodsName}</td>
                            <td>${allOrderByGoodsId.startTime}</td>
                            <td>${allOrderByGoodsId.endTime}</td>
                            <td>${allOrderByGoodsId.object.orderEvaluate}</td>
                            <td>${allOrderByGoodsId.object.orderChar}</td>
                            <td>${allOrderByGoodsId.object.orderState.commentsState}</td>
                            <c:if test="${allOrderByGoodsId.object.orderState.commentsStateId == 1}">
                                <td><input type="button" value="发货"
                                           onclick="window.location.href='<%=ctx%>/Order/updateOrderState?orderId=${allOrderByGoodsId.object.orderId}&state=2'">
                                </td>
                            </c:if>
                            <c:if test="${allOrderByGoodsId.object.orderState.commentsStateId == 4}">
                                <td><input type="button" value="同意退货"
                                           onclick="window.location.href='<%=ctx%>/Order/updateOrderState?orderId=${allOrderByGoodsId.object.orderId}&state=5'">
                                    <input type="button" value="不同意退货"
                                           onclick="window.location.href='<%=ctx%>/Order/updateOrderState?orderId=${allOrderByGoodsId.object.orderId}&state=6'">
                                </td>
                            </c:if>
                        </tr>
                    </c:forEach>
                </table>
            </div>
        </div>
    </div>
</div>
</body>
<style>
    span {
        border-radius: 5px;
        left: 200px;
        bottom: -224px;
        position: absolute;
        width: 350px;
        height: 300px;
        display: none;
        background-color: #EFEFEF;
    }

    span > img {
        margin: 15px 65px;
        width: 165px;
        height: 165px;
    }

    span > button {
        width: 16px;
        position: absolute;
        margin: 12px 0 0 28px;
        height: 16px;
        border: none;
    }

    span > h3 {
        margin: 5px 10px;
    }

    span > li {
        margin: 5px 10px;
        font-size: 15px;
    }

    span > i {
        float: right;
        font-size: 13px;
        margin-right: 20px;
    }

    span > li > p {
        display: inline;
        font-size: 24px;
        color: #f93838;
    }

    span > ul > li > p {
        display: inline;
        font-size: 13px;
        color: #000;
    }

    #part2 > button {
        right: 15px;
        border: none;
        line-height: 30px;
        height: 30px;
    }

    #part2 > img {
        float: left;
        margin: 68px 20px 0;
    }

    #part2 > ul {
        float: left;
        margin: 68px 0 0 0;
    }

    #part2 > ul > li {
        line-height: 30px;
        font-size: 14px;
    }
</style>

<script>
    var tabb = document.getElementById("tab").getElementsByTagName("li");
    var divs = document.getElementById("tabs").getElementsByTagName("div");

    for (var i = 0; i < tabb.length; i++) {
        tabb[i].onclick = function () {
            change(this);
        }
    }

    function change(obj) {
        for (var i = 0; i < tabb.length; i++) {
            if (tabb[i] == obj) {
                tabb[i].className = "fli";
                divs[i].className = "tabs1";
            } else {
                tabb[i].className = "";
                divs[i].className = "";
            }
        }
    }
</script>

</html>